<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-插值语法实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model:value="fn"><br><br>
        名：<input type="text" v-model:value="ln"><br><br>
        全名：<span>{{fullName}}</span><br> <!--这里不要写fullName()，get函数是被vm自动调用的，这里把fullName看做属性即可-->
    </div>
    <script>
        Vue.config.productionTip = false

        let vm = new Vue({
            el: "#root", 
            data: { 
                fn: "张",
                ln: "三",
                fullName: "张-三",
            },
            //使用监视属性代替计算属性，一般情况下使用计算属性更简便
            //但是监视属性可以做更灵活的处理，例如延迟1s后显示改变后的fullName值
            watch:{
                fn:{
                    handler(newValue, oldValue) {
                        setTimeout(()=>{ 
                            //这里必须用箭头函数，箭头函数没有this，会找到外面的this（vm）
                            //如果用普通函数，下面的this是window，window没有fullName属性就会报错
                            this.fullName = newValue.slice(0,3) + '-' + this.ln
                        }, 1000)
                    }
                },
                ln:{
                    handler(newValue, oldValue) {
                        this.fullName = this.fn.slice(0,3) + '-' + newValue
                    }
                }
            }
        })
    </script>
</body>
</html>